<!-- CustomDialog.vue -->
<template>
  <div class="custom-dialog animate__animated animate__zoomIn animate__faster" :class="{ 'custom-dialog-visible': visible}">
    <div class="custom-dialog-body">
      <div class="custom-dialog-header">
        <slot name="header"></slot>
        <button @click="close" class="close-button">X</button>
      </div>
      <slot name="body"></slot>
    </div>

  </div>
</template>

<script>
export default {
  name: 'CustomDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close'],
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.custom-dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  //opacity: 0;
  //pointer-events: none;
  transition: opacity 0.3s;
  opacity: 0;
  pointer-events: none;

  &.custom-dialog-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .custom-dialog-body {
    background-color: #ffffff;
    border: 5px solid #ebeef5;
    border-radius: 20px;
    margin-top: -25px;
    padding: 20px;
    width: 1300px;
    height: 600px;
    max-height: 600px;
    max-width: 1300px;
    overflow: hidden auto;

    .custom-dialog-header {
      border-bottom: 1px solid #ebeef5;
      display: flex;
      padding: 10px 0;
      margin-top: -15px;
      font-size: 18px;
      font-weight: bold;
      flex-direction: row;
      position: relative;
      .close-button{
        position: absolute;
        right: 1%;
        font-size: 1.2em; /* 增大字体大小 */
        color: #676666; /* 改变字体颜色 */
        background-color: transparent; /* 去除背景色，使按钮无背景 */
        border: none; /* 去除边框 */
        cursor: pointer; /* 设置鼠标悬停时变为手型 */
        outline: none; /* 去除点击后的轮廓线 */
        font-weight: bold;

        /* 添加 hover 和 active 状态样式 */
        &:hover,
        &:focus {
          color: red; /* 鼠标悬停或聚焦时，改变字体颜色 */
        }

        &:active {
          transform: scale(0.9); /* 按下时，缩小按钮尺寸 */
        }
      }
    }

  }
}
</style>